<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
<!--     <link rel="stylesheet" type="text/css"  href="javascripts/zui/css/zui.css" /> -->
    <link rel="stylesheet" href="stylesheets/zui.min.css"/>
    <link rel="stylesheet" href="stylesheets/main.css" id="css"/>
    <link rel="stylesheet" href="javascripts/showimg/css/showimg.css" id="css" />
    <script src="javascripts/jquery-1.10.1.min.js"></script>
    <script src="javascripts/touch.min.js"></script> 
    <script src="javascripts/sockjs-0.3.min.js"></script>
     <script src="javascripts/dragloader.js"></script>
     <script src="javascripts/showimg/showimg.js"></script>
<!--     <script src="javascripts/zui/js/zepto.min.js"></script> -->
<!--     <script src="javascripts/zui/js/zui.js"></script> -->
    <script src="javascripts/zui.min.js"></script>
    <script src="javascripts/tool.js"></script>
    <script src="javascripts/main.js"></script>
    <script src="javascripts/header.js"></script>
    <script src="javascripts/footer.js"></script>
    <script src="javascripts/preciousMetal.js"></script>
<!--     <script type="text/javascript" src="http://j.cloudid.anquanbao.com/t.js?ver=2015-10-21"></script> -->
    
<!--     <link rel="stylesheet" href="javascripts/pinchzoom/style.css"> -->
    <script type="text/javascript" src="javascripts/pinchzoom/underscore.js"></script>
    <script type="text/javascript" src="javascripts/pinchzoom/pinchzoom.js"></script>
    
    <style type="text/css">
/*     	.textarea{ */
/* 		    width: 400px;  */
/* 		    min-height: 20px;  */
/* 		    max-height: 300px; */
/* 		    _height: 120px;  */
/* 		    margin-left: auto;  */
/* 		    margin-right: auto;  */
/* 		    padding: 3px;  */
/* 		    outline: 0;  */
/* 		    border: 1px solid #a0b3d6;  */
/* 		    font-size: 12px;  */
/* 		    line-height: 24px; */
/* 		    padding: 2px; */
/* 		    word-wrap: break-word; */
/* 		    overflow-x: hidden; */
/* 		    overflow-y: auto; */
		 
/* 		    border-color: rgba(82, 168, 236, 0.8); */
/* 		    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6); */
/* 		} */
		
		    	.textarea_box {
				    
				    min-height: 20px; 
				    max-height: 300px;
				    _height: 120px; 
				    margin-left: auto; 
				    margin-right: auto; 
				    padding: 3px; 
				    outline: 0; 
				    border: 1px solid #a0b3d6; 
				    font-size: 12px; 
				    line-height: 24px;
				    padding: 2px;
				    word-wrap: break-word;
				    overflow-x: hidden;
				    overflow-y: auto;
				
				    border-color: rgba(82, 168, 236, 0.8);
					box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
				}
    </style>
    
    <title>斯迈普解盘侠</title>
    <script type="text/javascript">
    $(function(){
    	
    	//固定文本输入框的宽度
		var width = $('.textarea_box').width();
		$('.textarea_box').css('width',width);
    	var textarea = $('.form-control');
//     	textarea.css("height","2.5em");//设置文本框默认高度
//     	var counter = 0;
    	/* textarea.bind('propertychange input', function () {  
            counter = textarea.val().length;
           	if(counter > 20){
           		textarea.css("height","5em");
           	}
   		 }); */
    	
    });
    </script>
</head>
<body class="index">
 <!--头开始-->
    <header class="nav-header">
    </header>
    <!--头结束-->
<!--弹出框-->
<div class="modal fade" id="pro-dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header pro-dia-head">
                <h4 class="modal-title">选择观点</h4>
            </div>
            <div class="modal-body pro-dia-box">
                <div class="row">
                    <div class="col-xs-6">
                        <!--这里是采用btn-danger样式来做选中效果（active）-->
                        <button class="btn " name="d">多</button>
                    </div>
                    <div class="col-xs-6">
                        <button class="btn" name="k">空</button>
                    </div>
                </div>
                <div class="row has-mar-top">
                    <div class="col-xs-6">
                        <button class="btn " name="zd">震荡偏多</button>
                    </div>
                    <div class="col-xs-6">
                        <button class="btn" name="zk">震荡偏空</button>
                    </div>
                </div>
            </div>
            <div class="modal-footer pro-footer-box">
                <div class="row">
                    <div class="col-xs-6" data-dismiss="modal">取消</div>
                    <div class="col-xs-6 no-border mpePointSubmitBtn">确认</div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="modal-content-wrap">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header pro-dia-head">
                <h4 class="modal-title">发送图片</h4>
            </div>
            <div class="modal-body pro-dia-box">
                <div class="row">
                    <div class="col-xs-6">
                        <input type="file" id="uploadFile">
                    </div>
<!--                     <div class="col-xs-6"> -->
                        
<!--                     </div> -->
                </div>
            </div>
            <div class="modal-footer pro-footer-box">
                <div class="row">
                    <div class="col-xs-6" data-dismiss="modal">取消</div>
                    <div class="col-xs-6 no-border uploadImgSubmitBtn">发送</div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--弹出框-->

<div class="container main" style="padding-top:4.3rem;">
 <!--    <div class="row pre-title-box">
        <div class="col-xs-9">
            <span>斯迈普官方观点:</span><span class="color-text-red mpePoint"></span>
        </div>
        <div class="col-xs-3 pre-icon-box color-text-red" id="pro-btn">
            <i class="icon-edit"></i>
        </div>
    </div>
    <div class="row pre-time-box">
        <div class="col-xs-12">
            <span class="mpePointStartTime"></span>
        </div>
    </div> -->
    <div class="loadMoreBtn" style="text-align:center;color:rgb(137,211,231)">点击加载更多...</div>
    <div class="row con-box" id="precious-metal-room-wrapper" style="margin-top:0">
       
    </div>
    <!--发送块-->
    <div class="send-text-box" style="width:100%">
        <div class="col-xs-12">
            <div class="input-group" style="width:100%">
<!--             	<span class="icon-corner icon  business-upload-img-btn" ></span> -->
<!--             	<input class="business-upload-img-btn" type="button" value="图片"> -->
 
<!--                 <textarea class="form-control" ></textarea> -->
				<div class="textarea_box" contenteditable="true" style="background-color:white;text-align:left;"><br /></div>
				<div style="width:100%">
	                <a class="btn btn-inline btn-c with-icon-star business-upload-img-btn" style="float:left;" href="javascript:;">图片</a>
	                <a class="btn btn-inline btn-c with-icon-star business-send-btn" style="float:left;color:white;background:#D43B33" href="javascript:;">发送</a>
				
				</div>
<!--                 <span style="float:right;color:white;background:#D43B33" >发送</span> -->
<!--                 <span class="input-group-addon pre-send-btn">发送</span> -->
            </div>
        </div>
    </div>
    <!--发送块-->
    <footer class="nav-footer">
			<div class="col-xs-3  footer-nav-active" id="hall" >
				<i class="icon icon-home"></i>
				<h4>解盘</h4>
			</div>
			<div class="col-xs-3" id="notify"  >
				<i class="icon icon-volume-up"></i>
				<h4>喊单</h4>
			</div>
			<div class="col-xs-3" id= "news" >
				<i class="icon icon-globe"></i>
				<h4>资讯</h4>
			</div>
			<div class="col-xs-3" id="my" >
				<i class="icon icon-user"></i>
				<h4>个人中心</h4>
			</div>
</footer>
</div>

<script>

    showDialog();
    preDiaActive();
    /**
     * 弹出框启动
     */
    function showDialog(){
        var $btn = $("#pro-btn");
        $btn.click(function () {
//             $("#pro-dialog").modal({
//                 backdrop:"static"
//             })
            $('#pro-dialog').modal({
	            width:400,
	            title:'',
	            dismiss:true,
	            showTitle:true
	        });
        });
        
        $('.business-upload-img-btn').click(function () {
//             $("#pro-dialog").modal({
//                 backdrop:"static"
//             })
            $('#modal-content-wrap').modal({
	            width:400,
	            title:'',
	            dismiss:true,
	            showTitle:true
	        });
        });
    }
    function preDiaActive(){
        var $box = $(".pro-dia-box button");
        $box.click(function () {
            var $this = $(this);
            $box.removeClass("btn-danger");
            $this.addClass("btn-danger");
        });
    }
</script>

<!-- 模板勿删 -->
	<div id="template" style="display:none;">
				<div class="newsBoxTemplate news-box">
		                    <div class="col-xs-msg-time news-time-box">
		                        <div class="news-pointer-box"><div></div></div>
		                        <span class="t-publishTime">17:56</span>
		                    </div>
	           				<div class="col-xs-msg-content news-con-box">
		                        <div class="row">
		                            <div class="col-xs-1 text-icon-box"><span><i class="icon icon-list-alt"></i></span></div>
		                            <div class="col-xs-11 news-text-box" >
		                               <p class="t-news-content"><span class="t-news-text-content news-text-content">发改委：国企改革文件近期会陆续出台</span>
		                                </p>
		                            <div class="t-unfoldBtn" style="text-align:right;margin-right: 20px;"></div> 
		                            </div>
		                        </div>
		                    </div>
	        	</div>
	
	</div>
	
	
</body>
</html>